<template>
  <div class="home">
    <div class="activity-info">
      <div style="margin-bottom: 10px; font-weight: bold">活动基本信息</div>
      <!-- 活动基本信息 -->
      <div v-loading="data.loading">
        <el-descriptions
          class="margin-top"
          label-width="150px"
          :column="2"
          border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动名称
              </div>
            </template>
            <label>{{ props.data.title }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动状态
              </div>
            </template>
            <label>{{
              props.data.status == "completed" ? "已完成" : "已取消"
            }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动开始时间
              </div>
            </template>
            <label>{{ props.data.startTime }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                活动结束时间
              </div>
            </template>
            <label>{{ props.data.endTime }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                负责人
              </div>
            </template>
            <label>{{ props.data.publisherName }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动类型
              </div>
            </template>
            <label>{{ props.data.eventTypeName }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动人数
              </div>
            </template>
            <label>{{ props.data.count }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                活动地点
              </div>
            </template>
            <label>{{ props.data.location }}</label>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                描述
              </div>
            </template>
            <el-scrollbar height="80px">
              {{ props.data.description }}
            </el-scrollbar>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-bottom: 10px; font-weight: bold; margin-top: 20px">
        参加活动人员
      </div>
      <!-- 参加活动人员 -->
      <div style="width: 300px; margin: 0 auto; padding-bottom: 8px">
        <el-input
          v-model="datas.key"
          placeholder="请输入名称"
          :prefix-icon="Search"
        />
      </div>
      <div v-loading="data.loading">
        <el-table
          border
          :data="data.dedsctList"
          style="width: 100%; height: 300px"
        >
          <el-table-column fixed type="index" width="30" />
          <el-table-column fixed prop="name" label="名称" />
          <el-table-column prop="gender" label="性别" width="60" />
          <el-table-column prop="age" label="年龄" width="60" />
          <el-table-column prop="phone" label="手机号码" width="150" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="industryName" label="行业" />
          <el-table-column prop="createAt" label="报名时间" width="160" />
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          background
          :page-size="datas.limit"
          layout="prev, pager, next"
          :total="datas.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { getDictionaryTreeByDictionaryTypeKey } from "@/api/dictionary";
import { Pagination } from "@/api/activity";
import { Search } from "@element-plus/icons-vue";

const emit = defineEmits(["close-drawer"]);

const data = reactive({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
  isBahn: false,
  loading: false,
  typelist: [],
  isthg: false,
  dedsctList: [],
});

const datas = reactive({
  page: 1,
  limit: 10,
  total: 0,
  key: "",
});

//获取父级数据
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

// 点击分页
const handleSizeChange = (val: number) => {
  datas.page = 1;
  datas.limit = val;
};
const handleCurrentChange = (val: number) => {
  datas.page = val;
};

//绑定数据
const bind = async () => {
  data.loading = true;
  const res = await getDictionaryTreeByDictionaryTypeKey(
    "car_events_categorys"
  );
  if (res.code === 0) {
    data.typelist = res.data;
  }
  data.loading = false;
  //获取参加活动人员列表
  const res2 = await Pagination({
    ...datas,
    cid: props.data.id,
  });
  if (res2.code === 0) {
    data.dedsctList = res2.data.data;
    datas.total = res2.data.total;
  }
};

onMounted(() => {
  bind();
});
</script>

<style scoped>
.home {
  height: calc(760px - 28px);
  width: calc(100% - 28px);
  padding: 14px;
  background-color: #fff;
  border-radius: 10px;
}

.btn-container {
  position: fixed;
  bottom: 44px;
  right: 44px;
}

.countdown {
  margin-top: 40px;
}

.pagination {
  margin-top: 16px;
  margin-left: 0px;
}
</style>
